<template>
	<view class="">
		<view class="delete1">
			<view @click="binddelete" style="width: 50px;text-align: right;">删除</view>
		</view>
		<view class="orderBottom" v-if="carList.length != 0">
			<view class="orderGoods" v-for="(item,index) in carList">
				<view class="delete" @click="bindselect(index,item)" :id="item.id">
					<image src="../../../static/addition/class9.png" mode="" v-if="!item.select"></image>
					<image src="../../../static/addition/class10.png" mode="" v-else></image>
 
				</view>
				<view class="goodsImg">
					<image :src="item.img" mode=""></image>
					<view class="nostock" v-if="item.type == false">无库存</view>
				</view>
				<view class="goodsMsg">
					<view class="goodsName">{{item.title}}</view>
					<view class="goodspec">已选：{{item.Speci}}</view>
					<view class="goodspec">销量：{{item.sell}}</view>
					<view class="goodsnumprice">
						<view class="goodsprice">
							<view class="price">{{item.price}}</view>
							<view class="jifen">积分</view>
						</view>
						<view class="buynum">
							<view class="down" :num='item.num' @click="deleteCarnum(item)">
								<image src="../../../static/icon-input-reduce.png" mode=""></image>
							</view>
							<view class="goodsnum">{{item.num}}</view>
							<view class="up" :num='item.num' @click="addCarnum(item)">
								<image src="../../../static/icon-input-add.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="allcartMsg" v-else>
			<image class="cartImg" src="../../../static/addition/class1.png" mode=""></image>
			<view class="cartNull">购物车空空~</view>
			<view class="goShop" @click="bindgoshop">去逛逛</view>
		</view>
		<view class="carmsg">
			<view class="allselect" @click="bindAllselect">
				<image src="../../../static/addition/class9.png" mode="" v-if="!allselect"></image>
				<image src="../../../static/addition/class10.png" mode="" v-else></image>
				<view class="">全选</view>
			</view>
			<view class="cart">
				<view class="total">合计：</view>
				<view class="integral">{{allprice}}积分</view>
				<view class="settlement" @click="bindmanage">去结算 ({{allnum}})</view>
			</view>
		</view>
	</view>
</template>
 
<script>
	// import api from '../../config/api.config.js';
	export default {
		data() {
			return {
				pages: 1,
				rows: 10,
				allselect: false, // 监听全选按钮
				selectLength: [], //选中状态的长度
				carList: [], //购物车
				// allprice:0,//总分
				// allnum:0,//购物车总数
				deleteId: [], //删除的购物车id
				totalId: [], //结算id
				addclick: false, //增加
				cutclick: false, //减少
				carList:[
				    {   
				        shopId: 1,
				        title: "山东碉堡建设制造二分厂",
						Speci:20,
						sell:10,
				        total: 2,
				        goodsAmount: 6051,
						price:200,
				        selected:true,
						img: '../../../static/home/ss-imgs1.png',
						
				        glist:[
				            {
				                id: 236,
				                gid: 47,
				                name: "Apple iPhone 12 Pro Max 256GB",
				                img: '../../../static/home/ss-imgs1.png',
				                gsId: 72,
								num:'??????',
				                spec_key_name: "已选 海蓝色| 256GB 公开版 1件",
				                spec: [{name: "Apple iPhone", value: "iPhone 12 Pro Max 256GB"}, {name: "颜色", value: "海蓝色"}],
				                price: 19,
				                number: 1,
				                stock: 193,
				                selected:true,
				            },
				            {
				                id: 237,
				                gid: 45,
				                name: "盆栽",
				                img: "../../../static/home/ss-imgs2.png",
				                gsId: 65,
				               spec_key_name: "已选 海蓝色| 256GB 公开版 1件",
				               spec: [{name: "Apple iPhone", value: "iPhone 12 Pro Max 256GB"}, {name: "颜色", value: "海蓝色"}],
				                price: 6001,
				                number: 1,
				                stock: 77,
				                selected:true,
				            }
				        ]
				    },
				    {
				       shopId: 1,
				       title: "山东碉堡建设制造三分厂",
				       Speci:20,
				       sell:10,
				       total: 2,
				       goodsAmount: 6051,
				       price:200,
				       selected:true,
				       img: '../../../static/home/ss-imgs1.png',
				        glist:[
				            {
				                id: 188,
				                gid: 31,
				                name: "橘子",
				                img: '../../../static/home/ss-imgs2.png',
				                gsId: 50,
				               spec_key_name: "已选 海蓝色| 256GB 公开版 1件",
				               spec: [{name: "Apple iPhone", value: "iPhone 12 Pro Max 256GB"}, {name: "颜色", value: "海蓝色"}],
				                price: 3,
				                number: 10,
				                stock: 78,
				                selected:true,
				            },
				            {
				                id: 235,
				                gid: 35,
				                name: "积分购买测试",
				                img: "../../../static/home/ss-imgs2.png",
				                gsId: 56,
				               spec_key_name: "已选 海蓝色| 256GB 公开版 1件",
				               spec: [{name: "Apple iPhone", value: "iPhone 12 Pro Max 256GB"}, {name: "颜色", value: "海蓝色"}],
				                price: 1,
				                number: 1,
				                stock: 97,
				                selected:true,
				            }
				        ]
				    }
				],
			}
		},
		computed: {
			//计算选中的商品的价格
			allprice: function() {
				var allprice = 0;
				this.carList.map(function(item, index) {
 
					item.select ? allprice += item.num * item.price : allprice += 0
 
				})
				return allprice
			},
			//计算选中商品的数量
			allnum: function() {
				var allnum = 0
				this.carList.map(function(item, index) {
 
					item.select ? allnum += item.num : allnum += 0
 
				})
 
				return allnum
			},
 
		},
		methods: {
			//结算
			bindmanage:function(){
				var that = this;
				that.totalId = [];
				that.carList.map(function(item, index) {
					if (item.select) {
						that.totalId.push(item.id)
					}
				
				})
				if (that.totalId.length == 0) {
					uni.showToast({
						title: '请选择要结算的商品',
						icon: 'none'
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '确实要兑换商品吗？',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.request({
									url: api.api.ShopCarOrderPay,
									header: {
										'token': uni.getStorageSync('token')
									},
									data: {
										shopcar_id: that.totalId.join(','),
										url:'http://yinhang.tvue.brofirst.cn/#/pages/scanCode/index'
									},
									success: function(res) {
										console.log(res)
										if(res.data.code == 1){
											for (let i = 0; i < that.totalId.length; i++) {
												for (let j = 0; j < that.carList.length; i++) {
											
													if (that.totalId[i] == that.carList[j].id) {
														
														that.carList.splice(j, 1)
														that.carList = that.carList;
													}
												}
											}
											that.allselect = false;
											var sn = res.data.data.OrderSn;
											var code = res.data.data.QrCode;
											var num = res.data.data.num;
											uni.navigateTo({
												url: '../exchangeSuccess/index?sn='+sn +'&code='+code +'&num='+num
											})
										}else {
											uni.showToast({
												title:res.data.msg,
												icon:'none'
											})
										}
									
										
				
				
									}
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
				
				
						}
					})
				}
			},
			//去逛逛
			bindgoshop: function() {
				uni.switchTab({
					url: '../index/index'
				})
			},
			//购物车删除
			binddelete: function() {
				var that = this;
				that.deleteId = [];
				that.carList.map(function(item, index) {
					if (item.select) {
						that.deleteId.push(item.id)
					}
 
				})
				if (that.deleteId.length == 0) {
					uni.showToast({
						title: '请选择要删除的商品',
						icon: 'none'
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '确实要删除商品吗？',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.request({
									url: api.api.ShopCarDelete,
									header: {
										'token': uni.getStorageSync('token')
									},
									data: {
										shopcar_id: that.deleteId.join(',')
									},
									success: function(res) {
										console.log(res)
										that.allselect = false;
										for (let i = 0; i < that.deleteId.length; i++) {
											for (let j = 0; j < that.carList.length; i++) {
 
												if (that.deleteId[i] == that.carList[j].id) {
													console.log(j + 'aaaa')
													that.carList.splice(j, 1)
													that.carList = that.carList;
												}
											}
										}
										return
 
 
									}
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
 
 
						}
					})
				}
 
			},
			//全选
			bindAllselect: function() {
				var that = this;
				that.allselect = !that.allselect
				if (that.allselect) {
					that.carList.map(function(item, index) {
						item.select = true
					})
				} else {
					that.carList.map(function(item, index) {
						item.select = false
					})
				}
			},
			//购物车数量减少
			deleteCarnum(item) {
				console.log(item);
				var num = item.num;
				var id = item.id
				var that = this;
				//防止点击过快
				if (that.cutclick) return
				that.cutclick = true
				if (num > 1) {
					--num
				} else {
					num = 1;
					return
				}
				uni.request({
					url: api.api.ShopCarContent,
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						shopcar_id: id,
						type: 2
					},
					success: function(res) {
						console.log(res)
						if (res.data.code == 1) {
							item.num = num
							that.cutclick = false;
						} else {
							uni.showToast({
								title: res.data.msg
							})
						}
 
					}
				})
			},
			//购物车数量增加
			addCarnum(item) {
				console.log(item);
				var num = item.num;
				var id = item.id
				var that = this;
				//防止点击过快
				if (that.addclick) return
				that.addclick = true
				if (num >= item.Stock) {
 
					return
				} else {
					++num
 
				}
				uni.request({
					url: api.api.ShopCarContent,
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						shopcar_id: id,
						type: 1
					},
					success: function(res) {
						console.log(res)
						if (res.data.code == 1) {
							item.num = num;
							that.addclick = false;
						} else {
							uni.showToast({
								title: res.data.msg
							})
						}
					}
				})
			},
			//选择商品
			bindselect(i, item) {
 
				this.carList[i].select = !this.carList[i].select;
				var that = this;
				that.selectLength = [];
				that.carList.map(function(item, index) {
 
					if (item.select == true) {
						that.selectLength.push(item.select);
						if (that.carList.length == that.selectLength.length) {
 
							that.allselect = true;
						} else {
							that.allselect = false;
						}
					}
				})
				this.$forceUpdate();
 
			}
 
		},
		onLoad: function(options) {
 
 
		},
		onShow: function(options) {
			var that = this;
			that.allselect = false;
			if (uni.getStorageSync('token') != '') {
				uni.request({
					url: api.api.ShopCarList,
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						pages: that.pages,
						rows: that.rows
					},
					success: function(res) {
						console.log(res)
						if (res.data.code == 1) {
							that.carList = res.data.data.list;
 
 
							that.$forceUpdate();
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			} else {
				uni.showToast({
					title: '请先去登录',
					icon: 'none'
				})
				setTimeout(function() {
					uni.switchTab({
						url: '../my/index'
					})
				}, 2000)
			}
		}
	}
</script>
 
<style>
	/* @import url("../../static/css/base.css"); */
	/* @import url("../../static/css/iconfont.css"); */
 
	page {
		background-color: #F7F8FA;
	}
 
	.delete1 {
		display: flex;
		justify-content: flex-end;
		height: 80rpx;
		line-height: 80rpx;
		text-align: right;
		padding: 0 32rpx;
		font-size: 32rpx;
		color: #02170B;
		background-color: #FFFFFF;
	}
 
	.orderBottom {
		background-color: #FFFFFF;
		padding: 24rpx;
		/* 	border-radius: 24rpx;
		box-shadow: 0px 16rpx 43rpx 0px rgba(99, 1, 0, 0.05); */
		margin-bottom: 24rpx;
	}
 
	.orderTitle {
		font-size: 32rpx;
		color: #323233;
		margin-bottom: 24rpx;
	}
 
	.orderGoods {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
 
	.goodsImg {
		width: 240rpx;
		height: 240rpx;
		margin-right: 24rpx;
		flex-shrink: 0;
		position: relative;
 
	}
 
	.nostock {
		position: absolute;
		width: 78rpx;
		padding: 0 6rpx;
		height: 32rpx;
		line-height: 32rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 22rpx;
		background: #c3c3c3;
		border-radius: 100px;
		right: 8rpx;
		bottom: 8rpx;
	}
 
	.goodsImg image {
		width: 100%;
		height: 100%;
	}
 
	.goodsMsg {
		display: flex;
		flex-flow: column;
		justify-content: space-around;
		height: 240rpx;
	}
 
	.goodsName {
		width: 100%;
		font-size: 32rpx;
		display: -webkit-box;
		/* autoprefixer: off */
		-webkit-box-orient: vertical;
		/* autoprefixer: on */
		-webkit-line-clamp: 2;
		overflow: hidden;
 
 
	}
 
	.goodspec {
		color: #969799;
	}
 
	.goodsprice {
		display: flex;
		color: #ff4444;
		align-items: center;
 
	}
 
	.price {
		font-size: 36rpx;
 
	}
 
	.jifen {
		font-size: 24rpx;
 
	}
 
	.goodsnumprice {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
 
	.buynum {
		display: flex;
		align-items: center;
 
	}
 
	.allgoodsmsg {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-top: 28rpx;
		border-top: 2rpx solid #EEEEEE;
	}
 
	.allprice {
		font-size: 32rpx;
		color: #ff4444;
	}
 
	.addgodds {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
		padding: 0 24rpx;
		height: 96rpx;
		border-radius: 24rpx;
		margin-top: 24rpx;
		margin-bottom: 24rpx;
	}
 
	.right image {
		width: 12rpx;
		height: 20rpx;
	}
 
	.delete {
		width: 32rpx;
		height: 32rpx;
		margin-right: 14rpx;
	}
 
	.delete image {
		width: 32rpx;
		height: 32rpx;
	}
 
	.down {
		width: 42rpx;
		height: 42rpx;
	}
 
	.down image {
		width: 42rpx;
		height: 42rpx;
	}
 
	.up {
		width: 42rpx;
		height: 42rpx;
	}
 
	.up image {
		width: 42rpx;
		height: 42rpx;
	}
 
	.goodsnum {
		width: 64rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 500;
	}
 
	.finish {
		position: fixed;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background-color: #FD2E2D;
		color: #FFFFFF;
		font-weight: 500;
		bottom: 0;
		left: 0;
		letter-spacing: 2rpx;
	}
 
	.cartImg {
		width: 200rpx;
		height: 200rpx;
		margin-top: 120rpx;
	}
 
	.allcartMsg {
		text-align: center;
		height: 800rpx;
		background-color: #FFFFFF;
	}
 
	.cartNull {
		font-size: 32rpx;
		color: #969799;
		margin: 40rpx auto 56rpx;
	}
 
	.goShop {
		width: 300rpx;
		margin: auto;
		height: 88rpx;
		line-height: 88rpx;
		background: #ffffff;
		border: 2rpx solid #ff4444;
		border-radius: 200rpx;
		text-align: center;
		font-size: 32rpx;
		color: #FF4444;
	}
 
	/* 底部全选价格 */
	.carmsg {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 100rpx;
		width: 100%;
		left: 0;
		padding: 0 32rpx;
		box-sizing: border-box;
 
	}
 
	.allselect {
		display: flex;
		align-items: center;
		color: #969799;
		height: 32rpx;
		line-height: 32rpx;
 
	}
 
	.allselect image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 8rpx;
	}
 
	.cart {
		display: flex;
		align-items: center;
	}
 
	.total {
		font-size: 32rpx;
		color: #56575A;
	}
 
	.integral {
		font-size: 32rpx;
		color: #FF4444;
		margin-right: 48rpx;
	}
 
	.settlement {
		width: 202rpx;
		height: 74rpx;
		line-height: 74rpx;
		background: #fd2e2d;
		text-align: center;
		color: #FFFFFF;
		border-radius: 40rpx;
	}
</style>